<template>
  <div class="person">
    <h2>需求：当水温达到60度，或水位达到80cm的时候，给服务器发请求</h2>
    <h2>当前水温：{{ temp }}</h2>
    <h2>当前水位：{{ sum }}</h2>
    <button @click="changeSum">水位+10</button>
    <button @click="changeTemp">水温+1</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect, watch } from "vue";
let sum = ref(0);
let temp = ref(10);
function changeSum() {
  sum.value += 10;
}
function changeTemp() {
  temp.value += 1;
}
//如果要监视很多东西就要写很多玩意儿
// watch([sum, temp], (newValue) => {
//   let [newTemp, newNum] = newValue;
//   console.log("数据变化了", newTemp, newNum);
//   if (newTemp >= 60 || newNum >= 80) {
//     console.log("给服务器发请求");
//   }
// });

//watchEffect实现
//不用明确指出监视的数据  就不需要什么newValue什么的了
watchEffect(() => {
  if (temp.value >= 60 || sum.value >= 80) {
    console.log("发请求");
  }
});
</script>
